import React, { useCallback, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { USER_KEY } from '../../utils/constant'
import { Navigate, Link, Routes, Route, useLocation } from "react-router-dom"
import { signout } from '../../service/request'
import { Layout, Button, Menu } from 'antd';
import About from '../About'
import { removeUser } from '../../store/userReducer'
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';
import Home from '../Home'
const { Header, Sider, Content } = Layout;

const HomePage = () => {
    const dispatch = useDispatch()
    const location = useLocation()
    const user = useSelector(state => state[USER_KEY].user)
    // console.log(user)
    const [collapsed, toggleCollapsed] = useState(false)
    const toggle = useCallback(() => {
        toggleCollapsed(!collapsed)
    }, [collapsed])
    const signOut = useCallback(async () => {
        const res = await signout()
        if (res.status === 200) {
            setTimeout(() => {
                dispatch(removeUser())
            })
        }
    }, [dispatch])
    const getDefaultKeys = useCallback(
        () =>  '/' + location.pathname.split('/')[1],
        [location],
    )
    if (!user) return <Navigate to="/login" />
    return (
        <Layout>
            <Sider trigger={null} collapsible collapsed={collapsed} id="components-layout-demo-custom-trigger">
                <div className="logo">
                    <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="logo" />
                    <h1 className={collapsed ? 'hide' : ''}>微前端应用</h1>
                </div>
                <Menu theme="dark" mode="inline" defaultSelectedKeys={getDefaultKeys}>
                    <Menu.Item key="/" icon={<UserOutlined />}>
                        <Link
                            to="/"
                        >主应用</Link>
                    </Menu.Item>
                    <Menu.Item key="/about" icon={<UserOutlined />}>
                        <Link
                            to="/about"
                        >主应用About</Link>
                    </Menu.Item>
                    <Menu.Item key="/bar" icon={<VideoCameraOutlined />}>
                        <Link
                            to="/bar"
                        >微应用Bar</Link>
                    </Menu.Item>
                    <Menu.Item key="/foo" icon={<UploadOutlined />}>
                        <Link
                            to="/foo"
                        >微应用Foo</Link>
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout className="site-layout">
                <Header className="site-layout-background" style={{ padding: '0 20px 0 0', display: 'flex', alignItems: 'center' }}>
                    <Button
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={toggle}
                        type="text"
                    />
                    欢迎您，{user.account}
                    <div style={{ textAlign: 'right', flex: 1 }}>
                        <Button onClick={signOut}>退出</Button>
                    </div>

                </Header>
                <Content
                    className="site-layout-background"
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                    }}
                >
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/about" element={<About />} />
                    </Routes>
                    <div id="container"></div>
                </Content>
            </Layout>
        </Layout>)
}

export default HomePage
